<template>
  <van-cell class="comment-item">
    <van-image width="36" height="36" round fit="cover" :src="comment.aut_photo" />
    <div class="content-con">
      <div class="content">
        <div class="name">{{comment.aut_name}}</div>
        <div class="comment">{{comment.content}}</div>
        <van-button round size="mini" @click="$emit('reply-click',comment)">{{ comment.reply_count > 0 ?comment.reply_count:''}}回复</van-button>
      </div>
      <div class="like-warp" @click="onCommentLike">
        <van-icon :color="comment.is_liking ?'red': '#777'" :name="comment.is_liking ?'good-job':'good-job-o'"></van-icon>
        <span>{{ comment.like_count > 0 ?comment.like_count:''}}</span>
      </div>
    </div>
  </van-cell>

</template>

<script>
import { getCommentLike, deleteCommentLike } from '@/api/comment.js'
export default {
  name: 'commentItem',
  data () {
    return {
    }
  },
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  methods: {
    async onCommentLike () {
      const commentlId = this.comment.com_id.toString()
      if (this.comment.is_liking) {
        await deleteCommentLike(commentlId)
        this.comment.like_count--
      } else {
        await getCommentLike(commentlId)
        this.comment.like_count++
      }

      this.comment.is_liking = !this.comment.is_liking
    }
  }
}
</script>

<style scoped lang="less">
.comment-item {
  .van-cell__value {
    display: flex;
    flex-direction: row;
  }
  .content-con {
    margin-left: 12px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    .van-button {
      width: 40px !important;
    }
  }
}
</style>
